<!--
 * @Author: wwssaabb
 * @Date: 2021-07-19 11:30:43
 * @LastEditTime: 2021-07-19 11:37:55
 * @FilePath: \demo\react_demo\demo\base_demo\vdom和真实dom.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="test">
    
  </div>

  <script type="text/javascript" src="../js/react.development.js" ></script>
  <script type="text/javascript" src="../js/react-dom.development.js" ></script>
  <script type="text/javascript" src="../js/babel.min.js" ></script>
  <script type="text/babel">  /* JSX 语法用babel转换 */
    const VDOM=(
      <h1 id="title">
      <span>Hello React</span>
      </h1>
    )
    ReactDOM.render(VDOM,document.getElementById('test'))
    console.log(VDOM)
    /* 
      关于虚拟dom
      1.本质是一个普通对象
      2.虚拟dom比较’廋‘，真实dom比较’胖‘，因为虚拟dom只是react内部使用，无需真实dom上过多的属性
      3.虚拟dom最终会渲染成真实的dom
    */
  </script>
</body>
</html>